<template>
  <div class="parallax-barrier">
    <div class="canvas" ref="canvas"></div>
  </div>
</template>

<script lang="ts">
import { Vue, Options } from 'vue-property-decorator';
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
interface Pos{
  x: number;
  y: number;
}
const logoSrc = import.meta.globEager('../../assets/*.png');
const scene =  new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 0, 5);
camera.setFocalLength(5);
const point = new THREE.PointLight(0xffffff);
point.position.set(400, 200, 300);
scene.add(point);
const ambient = new THREE.AmbientLight(0x444444);
scene.add(ambient);
const renderer = new THREE.WebGLRenderer({
  alpha: true,
  antialias: true,
});
renderer.debug.checkShaderErrors = false;
renderer.setClearColor(new THREE.Color(), 0);
renderer.setPixelRatio(750 / window.innerWidth);
const mouseX = 0; const mouseY = 0;
let windowHalfX = window.innerWidth / 2;
let windowHalfY = window.innerHeight / 2;
@Options({ components: {} })
export default class Parallaxbarrier extends Vue {
  public rect: DOMRect|null = null;
  public spheres: any[] = [];
  public velTo: Pos = { x: 0, y: 0 };

  public play() {
    const timer = 0.0001 * Date.now();
    // camera.position.x += (mouseX - camera.position.x) * .05;
    // camera.position.y += (- mouseY - camera.position.y) * .05;
    // camera.lookAt(scene.position);
    // for (let i = 0, il = this.spheres.length; i < il; i ++) {
    //   const sphere = this.spheres[i];
    //   sphere.position.x = 10 * Math.cos(timer + i);
    //   sphere.position.y = 12 * Math.sin(timer + i * 1.2);
    //   sphere.rotation.z = Math.random() * 0.1;
    // }


    // eslint-disable-next-line @typescript-eslint/prefer-for-of
    for (let i = 0; i < this.spheres.length; i ++) {
      const angle = Math.floor(Math.random() * 360);
      const vel =  Math.random();
      this.velTo.x = vel * Math.cos(angle);
      this.velTo.y = vel * Math.sin(angle);
      const sphere = this.spheres[i];
      sphere.position.x += (this.velTo.x - sphere.position.x);
      sphere.position.y += (this.velTo.y - sphere.position.y);
    }

    renderer.render(scene, camera);
  }
  public onWindowResize() {
    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
  }
  // eslint-disable-next-line @typescript-eslint/naming-convention
  public MouseMove(ev: MouseEvent) {

  }
  public mounted() {
    this.rect = (this.$el as HTMLElement).getBoundingClientRect();
    renderer.setSize(this.rect.width, this.rect.height, false);
    (this.$refs.canvas as HTMLDivElement).append(renderer.domElement);

    const textureCube = new THREE.TextureLoader().load(logoSrc['../../assets/union.png'].default);
    const geometry = new THREE.SphereGeometry(0.1, 32, 16);
    const material  = new THREE.MeshBasicMaterial({
      color: 0xffffff,
      map: textureCube,
    });
    for (let i = 0;i < 50;i++) {
      const mesh = new THREE.Mesh(geometry, material);
      mesh.position.x = Math.random() * 0.1;
      mesh.position.y = Math.random() * 0.1;
      scene.add(mesh);
      this.spheres.push(mesh);
    }

    renderer.setAnimationLoop(() => {
      this.play();
    });

    const controls = new OrbitControls(camera, renderer.domElement);
    controls.enableZoom = false;

    document.addEventListener('mousemove', this.MouseMove);
    window.addEventListener('resize', this.onWindowResize);
  }
}
</script>

<style lang="postcss" scoped>
  .parallax-barrier{
    touch-action: none;
    position: absolute;
    left: 0;top: 0;
    width: 100%;height: 100%;
    background: #98bbd1;
     .canvas{
      position: absolute;
      left: 0;top: 0;
      width: 100%;height: 100%;
       :deep(canvas){
        width: 100%;height: 100%;
      }
    }
  }
</style>
